/**
 * 创元汇 - WebName
 * https://menger.me
 * @大梦
 */

import React, {Component} from 'react'
import {
    Text,
    View,
    Image,
    TextInput,
    ScrollView,
    StyleSheet,
    TouchableOpacity,
    StatusBar
} from 'react-native'
import { StackActions, NavigationActions } from 'react-navigation'
import NetRequest from '../../utils/utilsRequest'
import ServicesApi from '../../constants/ServicesApi'
import GlobalStyles from '../../constants/GlobalStyles'
import NavigationBar from '../../components/common/NavigationBar'
import UtilsView from '../../utils/utilsView'
import { toastShort, toastLong, consoleLog } from '../../utils/utilsToast'

export default class RenzhengTypeLogin extends Component {

    constructor(props) {
        super(props);
        this.state =  {
            user: global.user && global.user.userData ? global.user.userData : '',
            typeActive: -1,
            upup: 0
        }
        // this.netRequest = new NetRequest();
    }

    componentDidMount(){
        this.loadInvestData();
    }

    onBack = () => {
        this.props.navigation.goBack();
    }

    updateState= (state) => {
        if (!this) { return };
        this.setState(state);
    }

    loadInvestData = () => {
        let url = ServicesApi.get_investor_info;
        let data = {
            member_id: global.user.userData.id,
            token: global.user.userData.token
        }
        Services.post(url, data, true)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    console.log('result---->', result);
                    let investor_info = result.data;

                    storage.save({
                        key: 'investInfo',
                        data: investor_info
                    });

                    global.invest = {
                        investInfo: investor_info
                    };
                    this.getUserInfo();
                    this.updateState({
                        upup: 1
                    });
                }else{
                    toastLong(result.msg);
                }
            })
            .catch( error => {
                // console.log(error);
                toastShort('服务器请求失败，请稍后重试！');
            })
        
    } 

    getUserInfo = () => {
        let url = ServicesApi.get_member_info;
        let data = {
            member_id: global.user.userData.id,
            token: global.user.userData.token,
        }
        Services.post(url, data, true)
            .then( result => {
                console.log(result.data);
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    let user = result.data;

                    storage.save({
                        key: 'loginState',
                        data: user
                    });

                    global.user = {
                        loginState: true,
                        userData: user
                    };

                    this.updateState({
                        upup: 1
                    });
                }else{
                    storage.remove({
                        key: 'loginState',
                    });
                    global.user.loginState = false;
                    global.user.userData = [];
                    setTimeout(() => {
                        toastShort('您的账户信息已过期，请重新登录！')
                        const resetAction = NavigationActions.reset({
                            index: 0,
                            actions: [
                                NavigationActions.navigate({ routeName: 'Login'})
                            ]
                        })
                        this.props.navigation.dispatch(resetAction)
                    }, 101)
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })
        
    } 

    onPushNavigator = (compent) => {
        const { navigate } = this.props.navigation;
        navigate( compent , {
            onCallBack:()=>{
                this.loadInvestData();
            }
        })
    }   

    getNext = () => {
        let url = ServicesApi.set_special_type,
            typeActive = this.state.typeActive;

        if (typeActive == -1) {
            toastShort('请选择投资者类型');
            return false;
        }

        // console.log(typeActive);

        let data = {
            member_id: global.user.userData.id,
            token: global.user.userData.token,
            special_type: typeActive
        };

        Services.post(url, data)
            .then( result => {
                if (result && result.code == StatusCode.SUCCESS_CODE) {
                    global.invest.investInfo.editable = true;
                    this.onPushNavigator('RenzhengLogin');
                    // toastShort(result.msg);
                }else{
                    toastLong(result.msg);
                }
            })
            .catch( error => {
                toastShort('服务器请求失败，请稍后重试！');
            })

    }

    

    setType = (n) => {
        if(global.invest.investInfo.card_type == 1) {
            global.invest.investInfo.nationality_val = '中国';
            global.invest.investInfo.nationality = 1;
        }
        global.invest.investInfo.special_type = n;
        this.updateState({
            typeActive: n
        })
    }

    onPushHome = () => {
        setTimeout(() => {
            const resetAction = NavigationActions.reset({
                index: 0,
                actions: [
                    NavigationActions.navigate({ routeName: 'TabNavScreen'})
                ]
            })
            this.props.navigation.dispatch(resetAction)
        }, 500)
    }

    render(){
        let navigationBar = {
            backgroundColor: '#fff',
            borderBottomColor: '#f2f2f2',
            borderBottomWidth: 1
        }
        return (
            <View style={styles.container}>
                <NavigationBar
                    title = {'专业投资者认证'}
                    style = {navigationBar}
                    titleStyle = {{color: '#333333'}}
                    leftButton = {UtilsView.getLeftBlackButton(() => this.onBack())}
                    rightButton = {UtilsView.getRightTiaoguoBlackButton(() => this.onPushHome())}
                />
                <StatusBar
                    animated = {true}
                    hidden = {false}
                    backgroundColor = {'transparent'}
                    translucent = {true}
                    barStyle = {'dark-content'}
                />
                <View style={[GlobalStyles.whiteModule]}>
                    <Text style={styles.tishi}>选择您的身份，我们将会为您提供对应的服务</Text>
                    <View style={styles.typeList}>
                        <TouchableOpacity onPress={() => {this.setType(0)}} style={[styles.typeItem, GlobalStyles.flexRowBetween]}>
                            <Text style={styles.typeText}>非特殊投资者</Text>
                            {this.state.typeActive == 0 ?
                                <View style={[styles.typeRadio, styles.typeRadioActive]}>
                                    <Image source={require('../../assets/images/icons/icon_gouxuan.png')} style={[styles.gouxuanIco]} />
                                </View>
                            :
                                <View style={styles.typeRadio}></View>
                            }
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {this.setType(1)}} style={[styles.typeItem, GlobalStyles.flexRowBetween, GlobalStyles.hide]}>
                            <Text style={styles.typeText}>社保基金、企业年金等</Text>
                            {this.state.typeActive == 1 ?
                                <View style={[styles.typeRadio, styles.typeRadioActive]}>
                                    <Image source={require('../../assets/images/icons/icon_gouxuan.png')} style={[styles.gouxuanIco]} />
                                </View>
                            :
                                <View style={styles.typeRadio}></View>
                            }
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {this.setType(2)}} style={[styles.typeItem, GlobalStyles.flexRowBetween, GlobalStyles.hide]}>
                            <Text style={styles.typeText}>依法设立并在中国基金业协会备案的投资计划</Text>
                            {this.state.typeActive == 2 ?
                                <View style={[styles.typeRadio, styles.typeRadioActive]}>
                                    <Image source={require('../../assets/images/icons/icon_gouxuan.png')} style={[styles.gouxuanIco]} />
                                </View>
                            :
                                <View style={styles.typeRadio}></View>
                            }
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {this.setType(3)}} style={[styles.typeItem, GlobalStyles.flexRowBetween]}>
                            <Text style={styles.typeText}>创元汇及其从业人员</Text>
                            {this.state.typeActive == 3 ?
                                <View style={[styles.typeRadio, styles.typeRadioActive]}>
                                    <Image source={require('../../assets/images/icons/icon_gouxuan.png')} style={[styles.gouxuanIco]} />
                                </View>
                            :
                                <View style={styles.typeRadio}></View>
                            }
                        </TouchableOpacity>
                        <TouchableOpacity onPress={() => {this.setType(4)}} style={[styles.typeItem, GlobalStyles.flexRowBetween, GlobalStyles.hide]}>
                            <Text style={styles.typeText}>中国证监会特殊规定的机构及个人</Text>
                            {this.state.typeActive == 4 ?
                                <View style={[styles.typeRadio, styles.typeRadioActive]}>
                                    <Image source={require('../../assets/images/icons/icon_gouxuan.png')} style={[styles.gouxuanIco]} />
                                </View>
                            :
                                <View style={styles.typeRadio}></View>
                            }
                        </TouchableOpacity>
                    </View>
                    <TouchableOpacity onPress={()=>this.getNext()} style={styles.btn}>
                        <Text style={styles.btna}>下一步</Text>   
                    </TouchableOpacity>
                </View>
                
                {global.user.userData.is_investor == -1 ? 
                    <View style={[GlobalStyles.whiteModule, ]}>
                        <Text style={[GlobalStyles.defaultText, {color: '#f00'}]}>{global.user.userData.back_msg}</Text>
                    </View>
                    : 
                    null
                }
                
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
    },
    tishi: {
        fontSize: 15,
        color: '#333',
        paddingLeft: 15,
        marginBottom: 30,
        lineHeight: 24
    },
    typeList: {

    },
    typeItem: {
        height: 60,
        borderBottomWidth: 1,
        borderBottomColor: '#ececec',
        paddingLeft: 15,
        paddingRight: 15
    },
    typeText: {
        color: '#333',
        fontSize: 15,
    },
    typeRadio: {
        width: 22,
        height: 22,
        borderWidth: 1,
        borderColor: '#999',
        borderRadius: 11,
    },
    typeRadioActive: {
        backgroundColor: GlobalStyles.themeColor,
        borderColor: GlobalStyles.themeColor,
    },
    gouxuanIco: {
        width: 18,
        height: 18,
        top: 1,
        left: 1
    },
    btn: {
        marginTop: 36,
        marginLeft: 15,
        width: GlobalStyles.width - 30,
        height: 44,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        borderRadius: 5,
        backgroundColor: GlobalStyles.themeColor,
    },
    btna: {
        color: '#fff',
        fontSize: 16,
    }
});
